<template>
	<view class="layout">
		<view class="layout-header">
			￥
			<text>{{ withdrawalBalance }}</text>
		</view>

		<view class="layout-function">
			<view class="layout-function-item">
				<view class="layout-function-item-title">选择提现方式</view>

				<view
					class="layout-function-item-header"
					:key="index"
					v-for="(item, index) in withdrawalMethodList"
					@click="hanldeItemActive(item)"
				>
					<view class="layout-function-item-header-left">
						<image :src="item.icon" />
					</view>

					<view class="layout-function-item-header-center">{{ item.label }}</view>

					<view class="layout-function-item-header-right">
						<image :src="needIconObject[item.isActive ? 'active' : 'default']" />
					</view>
				</view>
			</view>

			<view class="layout-function-item" @click="openAddBank">
				<view class="layout-function-item-header">
					<view class="layout-function-item-header-left">
						<image :src="bankIcon" />
					</view>

					<view class="layout-function-item-header-center">增加银行卡提现</view>

					<view class="layout-function-item-header-right">
						<image src="/static/images/my/icon_more.png" />
					</view>
				</view>
			</view>
		</view>

		<view class="layout-addBank">
			<button hover-class="none" @click="clickOpenBank">银行卡管理</button>
		</view>

		<view class="layout-footer">
			<button hover-class="none" @click="submit" :loading="isLoading" :class="{ active: isLoading }">确认</button>
		</view>

		<VerifiedPopup v-model="isPopup" />
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { mapGetters, mapMutations } from 'vuex';
import { getMyBankList, withdrawalApply, getUserInfoVerified } from '@/api/other';

import VerifiedPopup from './components/VerifiedPopup';

const needIconObject = Object.freeze({
	default: require('@/static/tandian/icon_xqy_default.png'),
	active: require('@/static/tandian/icon_xqy_selected.png')
});
const bankIcon = Object.freeze(`${defaultImageUrl}icon/icon_pay_bankcard.png`);

const withdrawalMethodList = [
	{
		type: 1, // 微信
		isActive: true,
		label: '当前微信号（推荐）',
		icon: `${defaultImageUrl}icon/icon_sqtx_wechat.png`
	}
];

export default {
	data() {
		return {
			bankIcon,

			needIconObject,
			withdrawalMethodList,

			isPopup: false,
			isLoading: false,
			withdrawalBalance: 0
		};
	},

	created() {
		this.getPageData();
		this.getVerifiedStatus();
	},

	computed: {
		...mapGetters(['userInfo']),

		isVerifiedStatus() {
			const { verifiedStatus } = this.userInfo;

			return verifiedStatus === 1;
		}
	},

	onLoad(params) {
		this.withdrawalBalance = params?.amount || 0;
	},

	methods: {
		...mapMutations(['changeUserInfo']),

		getVerifiedStatus() {
			const { userInfo, isVerifiedStatus } = this;

			!isVerifiedStatus &&
				getUserInfoVerified().then((params) => {
					this.changeUserInfo({
						...userInfo,
						...(params?.data || {})
					});
				});
		},

		submit() {
			const { isLoading, isVerifiedStatus, withdrawalBalance, withdrawalMethodList } = this;

			if (isLoading) {
				return;
			}

			if (!isVerifiedStatus) {
				this.isPopup = true;
				return;
			}

			const { type, userBankId = '' } = withdrawalMethodList.find((item) => item.isActive);

			const params = {
				type,
				userBankId,

				amount: withdrawalBalance
			};

			this.isLoading = true;

			withdrawalApply(params)
				.then((res) => {
					const { code, data } = res;

					if (code !== 200) {
						return;
					}

					uni.showToast({
						mask: true,
						icon: 'none',
						duration: 2000,
						title: '提现申请成功',
						success: (e) => {
							setTimeout((e) => {
								/* eslint-disable */
								const pages = getCurrentPages();
								const beforePage = pages[pages.length - 2];

								beforePage?.$vm.getWithdrawalBalance?.();

								uni.redirectTo({
									url: '/otherPage/WithdrawalsRecord'
								});
								/* eslint enable */
							}, 1500);
						}
					});
				})
				.finally(() => {
					this.isLoading = false;
				});
		},

		getPageData() {
			getMyBankList().then((res) => {
				const bankList = (res?.data || []).map((item) => {
					const { id, icon = '', bankName, ...otherParams } = item;
					const newIcon = icon.startsWith('\/') ? icon.substr(1) : icon;

					return {
						...otherParams,

						type: 2, // 2 代表银行卡
						label: bankName,
						userBankId: id,
						icon: `${defaultImageUrl}${newIcon}`
					};
				});
			
				withdrawalMethodList[0].isActive = true
				this.withdrawalMethodList = [...withdrawalMethodList, ...bankList];
			});
		},

		clickOpenBank() {
			// const url = `/otherPage/BankCard?type=check`;
			const url = `/otherPage/BankCard`;

			uni.navigateTo({
				url
			});
		},

		openAddBank() {
			uni.navigateTo({
				url: '/otherPage/AddBankCard'
			});
		},

		hanldeItemActive(parmas) {
			const { isActive } = parmas;

			if (isActive) {
				return;
			}

			const { withdrawalMethodList } = this;

			withdrawalMethodList.some((item) => {
				if (item.isActive) {
					this.$set(item, 'isActive', false);
					this.$set(parmas, 'isActive', true);
					return true;
				}

				return false;
			});
		}
	},

	components: {
		VerifiedPopup
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	padding: 0 20rpx;
	@include Db_iosBottomDistance(140rpx);

	&-header {
		height: 244rpx;
		line-height: 244rpx;
		text-align: center;
		vertical-align: bottom;

		color: #333;
		font-size: 60rpx;
		font-weight: bold;

		text {
			font-size: 89rpx;
			font-family: font-number;
		}
	}

	&-function {
		&-item {
			margin-top: 20rpx;
			background: #fff;
			border-radius: 24rpx;

			padding: 0 20rpx 0 32rpx;

			color: #1f1f1f;
			font-size: 28rpx;
			overflow: hidden;

			&-title {
				font-weight: bold;
				margin-top: 32rpx;
			}

			&-header {
				display: flex;
				align-items: center;
				min-height: 100rpx;

				&-left {
					width: 66rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						display: block;
					}
				}

				&-center {
					flex: 1;
				}

				&-right {
					width: 80rpx;
					text-align: right;

					image {
						width: 52rpx;
						height: 52rpx;
						vertical-align: bottom;
					}
				}
			}

			&:first-child {
				margin-top: 0;

				padding-bottom: 14rpx;

				.layout-function-item-title {
					margin-bottom: 4rpx;
				}
			}
		}
	}

	&-addBank {
		margin-top: 28rpx;

		button {
			padding: 0;
			height: 40rpx;
			line-height: 40rpx;

			color: #487fff;
			font-size: 28rpx;
			text-align: right;

			background: transparent;
			&::after {
				display: none;
			}
		}
	}

	&-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 16rpx 22rpx 0;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 51, 51, 0.14);
		@include Db_iosBottomDistance(16rpx);

		button {
			@include Db_newButton(88rpx, 24rpx);

			// background: #ff6b11;

			// &:active,
			// &.active {
			// 	background: rgba(255, 107, 17, 0.7);
			// }
		}
	}
}
</style>
